import React, { useState } from 'react'


import MarkdownIt from 'markdown-it'
import MdEditor from 'react-markdown-editor-lite'
import 'react-markdown-editor-lite/lib/index.css'

export default function Md() {

    // 用来解析 md 用的
    const md = new MarkdownIt()

    const [htmlStr,setHtmlStr] = useState('')


    // {html,text}是解构其中的内容
    // const changeContent = ({ html, text }) => {
    const changeContent = (data) => {
        // 将该内容提交到服务器保存
        console.log(data.html, data.text);
        // 获取到当前输入的内容
        setHtmlStr(data.html)
    }
    return (
        <div>
            <MdEditor 
                style={{ height: 500 }} 
                renderHTML={text => md.render(text)} 
                onChange={changeContent} >
            </MdEditor>

            <div dangerouslySetInnerHTML={{ __html: htmlStr }}></div>
        </div>
    )
}
